/*
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-06-19 19:43:25
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-09-14 09:54:31
 * @FilePath: \myWorkspace\react-basic\src\components\TodoList\parent.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
// 类组件
// import { Component } from 'react'
// import Child1 from './child1.jsx'
// import Child2 from './child2.jsx'
// import { Provider } from '@/provider.js'
import { useState } from 'react'
// export default class parent extends Component {

//     state = { // 这样写相当于在constructor中写this.state
//         msg: 'parent msg'
//     }

//     render() {
//         return (
//             <Provider value={this.state.msg}>
//                 <div>
//                     <h2>父组件</h2>
//                     <Child2 />
//                 </div >
//             </Provider>
//         )
//     }
// }

export default function parent(props) {
    console.log('props',props)
    const [count, setCount] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9])
    const toDels = (index) => {
        const newData = [...count]
        console.log('newData', newData)
        newData.splice(index, 1)
        console.log('newData', newData)
        setCount(newData)
    }
    return (
        <ul>
            {
                count.map((item, index) => {
                    return <li key={index}>{item}<button onClick={() => toDels(index)}></button></li>
                })
            }
        </ul>
    )
}

// import React, { Component, createRef } from 'react'
// import TodoItem from './child1.jsx'

// export default class TodoList extends Component {
//     inputRef = createRef()

//     state = {
//         list: ['html', 'css', 'js'],
//         inputVal: ''
//     }

//     handleChange = (e) => {
//         this.setState({
//             inputVal: e.target.value
//         })
//     }

//     handleClick = () => {
//         if (this.state.inputVal) {
//             this.setState({
//                 list: [...this.state.list, this.state.inputVal],
//                 inputVal: ''
//             })
//         }
//     }

//     handleDel = (index) => {
//         let arr = this.state.list
//         arr.splice(index, 1)
//         this.setState({
//             list: arr
//         })
//     }

//     render() {
//         return (
//             <div>
//                 <header>
//                     <input type="text" value={this.state.inputVal} onChange={this.handleChange} />
//                     <button onClick={this.handleClick}>提交</button>
//                 </header>

//                 <section>
//                     <TodoItem list={this.state.list} cb={this.handleDel} />
//                 </section>
//             </div>
//         )
//     }
// }